<template>
  <div class="todo-info">
    <span class="total">{{total}} 条事项</span>
    <div class="tabs">
      <a v-for="(item,index) in items" :key="index" :class="['btn','primary','border',actived==item?'activedCss':'']" @click="choose(item)">{{item}}</a>
    </div>
    <button class="clearBtn" @click="clearFinish">清除已完成事项</button>
  </div>
</template>
<script>
  export default {
    name: "TodoInfo",
    data() {
      return {
        items: ["全部事项", "已完成", "待完成"],
        actived: "全部事项",
      };
    },
    props: {
      total: Number,
    },
    methods: {
      choose(item) {
        this.actived = item;
        this.$emit("filderItem", item);
      },
      clearFinish() {
        this.$emit("clearFinish");
      },
    },
  };
</script>
<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  @import '~styles/theme.styl'

  .todo-info
    display flex
    justify-content space-between
    padding 5px 10px
    font-weight 400
    line-height 30px
    border-top 1px solid rgba(0, 0, 0, 0.1)

    .total
      color $red

    .btn.primary.border
      cleanDefaultStyle()
      margin 5px
      padding 5px 10px
      background-origin 5px
      cursor pointer
      border-radius 6px
      border 1px solid $lightred

      &.activedCss
        background-color $lightred
        color #fff

    .clearBtn
      padding 5px 10px
      border-radius 6px
      cursor pointer
      background-color $green
      cleanDefaultStyle()

      &:hover
        background-color $lightred
        color #fff
</style>


